<div class="modal hide" {id}>
    <div on:keyup|stopPropagation class="modal-body">
        <button type="button" class="close" data-dismiss="modal" aria-label="{backButtonText}">
            <IconDisplay icon="close" size="20px" />
        </button>
        <div class="modal-content">
            <h1 class="modal-title mb-4">{@html title}</h1>
            <slot />
            <div class="actions pt-4 mt-4">
                <button class="btn back" data-dismiss="modal">{@html backButtonText}</button>
                <button
                    class="btn btn-danger"
                    data-dismiss="modal"
                    on:click="set({isConfirmed: true})"
                >
                    {#if confirmButtonIcon}
                    <IconDisplay
                        icon="{confirmButtonIcon}"
                        class="mr-1"
                        size="1.3em"
                        valign="-0.3em"
                    />
                    {/if} {@html confirmButtonText}
                </button>
            </div>
        </div>
    </div>
</div>

<style>
    .modal-title {
        font-size: 18px;
        font-weight: 500;
        line-height: 1.3;
    }

    .modal-content {
        padding: 25px 30px;
        color: #333333;
    }

    .actions {
        border-top: 1px solid #ececec;
        display: flex;
        justify-content: space-between;
    }

    .close {
        opacity: 0.4;
    }

    .close:hover,
    .close:focus,
    .close:active {
        opacity: 0.5;
    }

    .btn {
        padding-left: 25px;
        padding-right: 25px;
    }

    .back {
        font-weight: bold;
    }

    :global(.modal-content p) {
        font-weight: normal;
    }
</style>

<script>
    /* globals $ */
    import IconDisplay from './IconDisplay.html';

    export default {
        components: { IconDisplay },
        data() {
            return {
                id: '',
                title: 'Title',
                confirmButtonText: 'Confirm',
                confirmButtonIcon: false,
                backButtonText: 'Back',
                isConfirmed: false
            };
        },
        methods: {
            open() {
                this.set({ isConfirmed: false });
                $('#' + this.get().id).modal();
            }
        },
        oncreate() {
            $('#' + this.get().id).on(
                'hidden.bs.modal',
                function () {
                    if (this.get().isConfirmed) {
                        this.fire('confirm');
                    } else {
                        this.fire('dismiss');
                    }
                }.bind(this)
            );
        }
    };
</script>
